<template>
  <div class="mypage">
    <div class="mytop">
      <div class="myuser" v-if="userid">
        <img src="" class="userAvatar" />
        <div>
          <h3></h3>
          <div class="flex">
            <div class="isvip" v-if="isplus==1">
              <img src="/images/VIP.png" class="vip" />
              <span>PLUS</span>
            </div>
            <!-- <view class="buybi" bindtap="toselectNav">
              充值
            </view> -->
          </div>
          <div class="endtime">
            <span>有效期:</span>
            <span>{{time?time:'无'}}</span>
            <!-- <rich-text>有效期</rich-text> -->
          </div>
        </div>
      </div>
      <div class="" v-else>
        <router-link to="../login/index" hover-class="none" class="myuser">
          <img src="" class="userAvatar" />
          <div>
            <text>请登录</text>
            <!-- <view class="isvip">
              <image class="vip"></image>
              <text>PLUS</text>
            </view> -->
          </div>
        </router-link>

      </div>
      <div class="myNav">
        <div>
          <p>{{count?count:'0'}}</p>
          <span>金币</span>
        </div>
        <router-link to="/buy" >
          <!-- <text>{{time?time:'无'}}</text> -->
          <img src="../../assets/images/dui.png" />
          <span>兑换</span>
        </router-link>

      </div>
    </div>
<!--    <div class="mytop">-->
<!--      <div class="myuser" >-->
<!--        <img src="" class="userAvatar" />-->
<!--        <div>-->
<!--          <span type="userNickName" class=""></span>-->
<!--          <div class="isvip">-->
<!--            <img src="../../assets/images/VIP.png" class="vip" />-->
<!--            <span>PLUS</span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="myNav">-->
<!--        <div>-->
<!--          <span>1</span>-->
<!--          <p>咨询次数</p>-->
<!--        </div>-->
<!--        <div>-->
<!--          <span>20123221</span>-->
<!--          <p>有效期</p>-->
<!--        </div>-->

<!--      </div>-->
<!--    </div>-->
    <div class="myTarget">

      <router-link class="myTargetItem" to="/myconsult">
        <div class="myTargetTit">
          <i class="cuIcon-addressbook lg text-gray icon bg-oranges"></i>
          <span>我的咨询</span>
        </div>
        <div class="right"></div>
      </router-link>
      <router-link class="myTargetItem"  to="/mylike">
        <div class="myTargetTit">
          <i class="cuIcon-forward lg text-gray icon bg-cyan"></i>
          <span>我的收藏</span>
        </div>
        <div class="right"></div>
      </router-link>
      <router-link class="myTargetItem"  to="">
        <div class="myTargetTit">
          <i class="cuIcon-settings lg text-gray icon bg-blue"></i>
          <span>设置</span>
        </div>
        <div class="right"></div>
      </router-link>
      <router-link class="myTargetItem"  to="">
        <div class="myTargetTit">
          <i class="cuIcon-question lg text-gray icon bg-olive"></i>
          <span>反馈</span>
        </div>
        <div class="right"></div>
      </router-link>
    </div>
    <div class="foot">
      <tabar :tabbarindex="tabbarindex" />
    </div>
  </div>
</template>

<script>
import tabar from '@/components/nav'
export default {
  name: 'mypage',
  data () {
    return {
      tabbarindex: 3,
      isplus: '',
      time: '',
      userid: '',
      count: ''
    }
  },
  components: { tabar }
}
</script>

<style lang="stylus" scoped>
  @import "../../assets/css/common.styl"
  $bg-cyan #62D4A6 100%
  .bg-cyan
    background $bg-cyan
  .bg-oranges
    background $bg-oranges
  .bg-olive
    background $bg-olive
  .bg-blue
    background $bg-blue
  .mytop {
    padding: .3rem;
    background: #3F7BF7;
    color: #fff;
  }

  .myuser {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .userAvatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #efefef;
    margin-right: .2rem;
  }

  .isvip {
    background: #2C386A;
    padding: 4px 10px;
    font-size: .22rem;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }

  .vip {
    width: .2rem;
    height: .2rem;
    margin-right .1rem
  }

  .myNav {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    color: #fff;
    margin-top: .3rem;
  }

  .myNav span {
    display: block;
    margin-bottom: .1rem;
    color #fff
  }
  .myNav img{
    width .5rem;
    height .5rem
  }

  .myTargicon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #efefef;
    margin-right: 20px;
  }

  .myTargetItem {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #efefef;
    padding: .3rem;
    background-color: #fff;
  }

  .myTargetTit {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: .28rem;
    color: #101010;
  }
  .myTargetTit .icon{
    color:#fff;
    font-size: .3rem;
    border-radius: 50%;
    padding: .2rem;
    margin-right: .3rem;
  }
</style>
